<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
            // $(document).ready(function(){
            //查找HTML元素/查找元素属性:attr()
            //测试抓取节点
            // $("#btn1").click(function(){
            //     var text = $("#t0").text();
            //     var attr = $("#t0").attr("title");
            //     alert(text);
            //     alert(attr);
            // });

            // 创建HTML元素
            // $(document).ready(function(){
            //     var s1 = $("<li>窗含西岭千秋雪</li>");
            //     var s2 = $("<li>门泊东吴万里船</li>");
            //     $("button").click(function(){
            //         $("ul").append(s1);
            //         $("ul").append(s2);
            //     });
            // });

            //插入HTML元素
            // appendTo()  //append的反向写法;
            // prepend()   //插入时前置内容
            // prependTo() //prepend的反向写法
            // after()     //在元素匹配之后插入内容
            // insertAfter()   //after的反向写法
            // before()    //在元素匹配之前插入内容
            // insertBefore()  //before反向写法
            // });

            // $(document).ready(function(){
            //     $("#btn").click(function(){
            //         //$("ol").prepend("<li>追加目录3</li>")
            //         $("h2").before("<b>之前</b>");
            //     });
            // });

            //删除HTML元素
            //remove()
            // $(document).ready(function(){
            //     $("button").click(function(){
            //         $("#d1").remove();
            //     })
            // });

            //empty()
            // $(document).ready(function(){
            //     $("button").click(function(){
            //         $("#d1").empty();
            //     });
            // });

            //复制元素
            // $(document).ready(function(){
            //     $("button").click(function(){
            //         $("body").append($("p").clone());
            //     });
            // });

            //替换HTML元素
            //replaceWith() 将所有匹配的元素替换成指定的HTML元素或DOM元素
            //replaceAll(selector) 用匹配到的元素替换所有selector匹配到的元素  
            // $(document).ready(function(){
            //     $("button").click(function(){
            //         $("ul li:eq(0)").replaceWith("<li>苹果爱上大鸭梨</li>");
            //     });
            // });
    </script>
</head>
<body>
    <!-- 查找HTML元素 -->
    <!-- <p id="t0" title="静夜思--李白">床前明月光</p>
    <button id="btn1">请点我</button> -->

    <!-- 创建HTML元素 -->
    <!-- <button>点我我能写诗</button>
    <ul>
        <li>两个黄鹂鸣翠柳</li>
        <li>一行白鹭上青天</li>
    </ul> -->

    <!-- <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <button id="btn">添加</button> -->

    <!-- <div id="d1" style="height:100px;width:300px;border:1px solid black;background-color:yellow">
        这是div的文本
        <p title="hehe">段落1</p>
        <p title="hehe2">段落2</p>
    </div>
    <button>删我</button> -->

    <!-- <p>三月春风似剪刀</p>
    <button>复制元素 然后追加到body里</button> -->

    <ul>
        <li>日照香炉生紫烟</li>
        <li>遥看瀑布挂前川</li>
        <li>飞流直下三千尺</li>
        <li>疑是银河落九天</li>
    </ul>
    <button>替换HTML</button>
</body>
</html>